<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>在线接口文档</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black"><a style="color: #fff;" href="/">在线接口文档</a></div>
    </div>

    <div class="layui-body" style="left: 0">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;width: 600px;margin: 0 auto;background-color: #92B8B1;">
            <div style="padding: 20px;"><h2>在线请求</h2></div>
            <form class="layui-form" action="/result" method="post">
                <div id="formId"></div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>
<script src="./static/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layui/'
    }).use(['jquery', 'form' ], function(){
        const $ = layui.jquery
        const form = layui.form

        const query = getUrlByQuery()
        console.log(query)

        // 生成表单
        $.getJSON('/api/request?url=' + query, function(d) {
            if(d.code != 200) {
                layer.msg(d.msg)
                return false
            }
            const url = d.data.url
            const urlFull = d.data.url_full
            const param = d.data.param
            formCreate({name: "请求地址", key: "_url", default: url}, true)
            formCreate({name: "请求地址", key: "_urlfull", default: urlFull})
            formCreate({name: "请求方式", key: "_method", default: d.data.method})
            param.forEach(function(line) {
                formCreate(line)
            })
        })

        // 提交表单
        form.on('submit(*)', function() {
            return true
        })

        function formCreate(data, hide=false) {
            let val = data.default_cache
            if(!val) val = data.default
            let hideHtml = ""
            if (hide) {
                hideHtml = "layui-hide"
            }
            const html = '<div class="layui-form-item '+ hideHtml +'">\n' +
                '                    <label class="layui-form-label">'+ data.name +'</label>\n' +
                '                    <div class="layui-input-block">\n' +
                '                        <input type="text" name="'+ data.key +'" value="'+ val +'" class="layui-input">\n' +
                '                    </div>\n' +
                '                </div>';
            $('#formId').append(html)
        }

        function getUrlByQuery () {
            const search = location.search
            if (search.indexOf('?') === -1) {
                layer.msg('地址错误');
                return false;
            }
            let str = search.substr(1)

            const arr = str.split('=')
            return arr[1]
        }
    });
</script>
</body>
</html>